<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function sendAjax() {

            //使用原生的ajax请求方式向服务器发送请求
            //1.创建核心对象
            var xhttp;
            if (window.XMLHttpRequest) {//新的浏览器
                xhttp = new XMLHttpRequest();
            } else {//ie6 ie5老浏览器
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            //2.设置服务器地址并发送请求
            //  请求方式  文件在服务器上的位置 是否异步 true异步（默认） false 同步 
            //http://localhost:8080/studentSys/index.html
            xhttp.open("GET", "http://localhost:10010/emp/list");
            xhttp.send();

            //3.监听服务器相应的状态判断响应数据
            xhttp.onreadystatechange = function () {
                //判断4表示浏览器介绍到请求并得到响应  200表示这是一个正确的请求 没有错误
                if (xhttp.readyState == 4 && xhttp.status == 200) {
                    console.log(xhttp.responseText);
                    document.querySelector(".box").innerHTML = xhttp.responseText;
                }


            }




        }
    </script>
</head>

<body>
    <button onclick="sendAjax()">发送Ajax</button>
    <div class="box"></div>
</body>

</html>